// 商品管理
// 商品管理
<template>
  <div>
    <div class="frame">
      <el-button type="primary" class="issue">发布商品</el-button>
      <!-- 下拉 -->
      <el-dropdown>
        <el-button type="primary" split-button="true"
          >更多菜单<i class="el-icon-arrow-down el-icon--right"></i
        ></el-button>
        <el-dropdown-menu slot="dropdown" split-button="true">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 搜索 -->

      <el-input placeholder="请输入内容" v-model="input4" class="search">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>

      <!-- 多选框 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="url" label="商品" width="120">
          <div class="demo-image__preview">
            <el-image
              style="width: 70px; height: 70px"
              :src="url"
              :preview-src-list="Array"
            >
            </el-image>
          </div>
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column prop="name" label="商品名 价格" width="150">
        </el-table-column>
        <el-table-column prop="PageView" label="访问量" width="100">
        </el-table-column>
        <el-table-column prop="inventory" label="库存" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="sales" label="总销量" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="time" label="创建时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="serialnumber" label="序号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="operation" label="操作" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> -->
        <el-button @click="toggleSelection()">下架</el-button>
      </div>
    </div>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<style>
/* 导航 */
.frame {
  width: 100%;
  height: 760px;
  left: 210px;
  top: 60px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(255, 255, 255, 1);
  font-size: 14px;
  line-height: 150%;
  border: rgba(229, 229, 229, 1) solid 1px;
  text-align: center;
  margin-top: 10px;
  /* margin: auto; */
}
/* 发布按钮 */
.issue {
  float: left;
  margin-left: 30px;
  margin-top: 30px;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
/* 搜索 */
.search {
  float: right;
  margin-top: 30px;
  width: 200px;
  margin-right: 20px;
}
/* 下拉 */
.el-dropdown {
  vertical-align: top;
  margin-top: 30px;
  float: right;
  margin-right: 20px;
}
</style>
<script>
export default {
  created: {},
  methods: {
    handleClick() {
      alert("button click");
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      tableData: [
        {
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
          ],
          date: "2016-05-03",
          name: "艺术品 一万八千缘",
          inventory: "99+",
          PageView: "100",
          sales: "50",
          time: "2022/6/8",
          serialnumber: "001",
          operation: (
            <el-button-group>
              <el-button type="text">编辑</el-button>{" "}
              <el-button type="text">推广商品</el-button>
            </el-button-group>
          ),
        },
        {
          date: "2016-05-03",
          name: "艺术品 一万八千缘",
          inventory: "99+",
          PageView: "100",
          sales: "50",
          time: "2022/6/8",
          serialnumber: "001",
          operation: (
            <el-button-group>
              <el-button type="text">编辑</el-button>{" "}
              <el-button type="text">推广商品</el-button>
            </el-button-group>
          ),
        },
        {
          date: "2016-05-03",
          name: "艺术品 一万八千缘",
          inventory: "99+",
          PageView: "100",
          sales: "50",
          time: "2022/6/8",
          serialnumber: "001",
          operation: (
            <el-button-group>
              <el-button type="text">编辑</el-button>{" "}
              <el-button type="text">推广商品</el-button>
            </el-button-group>
          ),
        },
        {
          date: "2016-05-03",
          name: "艺术品 一万八千缘",
          inventory: "99+",
          PageView: "100",
          sales: "50",
          time: "2022/6/8",
          serialnumber: "001",
          operation: (
            <el-button-group>
              <el-button type="text">编辑</el-button>{" "}
              <el-button type="text">推广商品</el-button>
            </el-button-group>
          ),
        },
        {
          date: "2016-05-03",
          name: "艺术品 一万八千缘",
          inventory: "99+",
          PageView: "100",
          sales: "50",
          time: "2022/6/8",
          serialnumber: "001",
          operation: (
            <el-button-group>
              <el-button type="text">编辑</el-button>{" "}
              <el-button type="text">推广商品</el-button>
            </el-button-group>
          ),
        },
      ],
      multipleSelection: [],
    };
  },
};
</script>